<!DOCTYPE html>
<html id="popup" class="is-side-panel">
	<head>
		<title>Obsidian Web Clipper</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style.css">
		<script src="browser-polyfill.min.js"></script>
	</head>
	<body id="popup-container">
		<div id="popup-header">
			<div id="template-container">
				<select id="template-select">
					<option value=""></option>
				</select>
			</div>
			<div class="popup-actions">
				<a href="#" id="show-variables" class="clickable-icon" 
					data-i18n-title="showPageVariables">
					<i data-lucide="ellipsis"></i>
				</a>
				<a href="#" id="reader-mode" class="clickable-icon" style="display: none;"
					data-i18n-title="reader">
					<i data-lucide="book-open"></i>
				</a>
				<a href="#" id="highlighter-mode" class="clickable-icon" 
					data-i18n-title="highlightPage">
					<i data-lucide="highlighter"></i>
				</a>
				<a href="#" id="refresh-pane" class="clickable-icon"
					data-i18n-title="refresh">
					<i data-lucide="rotate-cw"></i>
				</a>
				<a href="#" id="open-settings" class="clickable-icon" 
					data-i18n-title="settings">
					<i data-lucide="settings"></i>
				</a>
				<a href="#" id="embedded-mode" class="clickable-icon" 
					data-i18n-title="embeddedMode">
					<i data-lucide="x"></i>
				</a>
			</div>
		</div>
		<p class="error-message" style="display: none;"></p>
		<div class="clipper">
			<textarea id="note-name-field" type="text" data-i18n="noteName" rows="1"></textarea>
			<div class="metadata-properties-header">
				<span data-i18n="properties"></span>
				<i data-lucide="chevron-down"></i>
			</div>
			<div class="metadata-properties"></div>
			<div id="note-content-container">
				<textarea id="note-content-field" rows="4" data-i18n="notesAboutPage"></textarea>
			</div>
			<div class="clipper-footer">
				<div class="vault-path-container">
					<div id="vault-container" style="display: none;">
						<select id="vault-select"></select>
					</div>
					<input id="path-name-field" type="text" data-i18n="folder"/>
				</div>
				<div id="interpreter" style="display: none;">
					<textarea id="prompt-context" rows="3"></textarea>
					<div class="interpreter-controls">
						<select id="model-select" style="display: none;"></select>
						<button id="interpret-btn" data-i18n="interpret"></button>
						<span id="interpreter-timer" style="display: none;"></span>
					</div>
					<div id="token-counter" class="token-counter"></div>
					<div id="interpreter-error" style="display: none;"></div>
				</div>
				<div class="action-buttons" id="action-buttons">
					<button id="clip-btn" class="mod-cta"><!-- Text set by determineMainAction --></button>
					<div class="menu-btn">
						<button id="more-btn"><i data-lucide="chevron-down"></i></button>
						<div class="menu" id="more-dropdown">
							<div class="secondary-actions">
								<!-- Secondary actions will be populated by ts -->
							</div>
						</div>
					</div>
					<div class="share-btn">
						<a class="share-content clickable-icon" data-i18n-title="share"><i data-lucide="share"></i></a>
					</div>
				</div>
			</div>
		</div>
		<script type="module" src="popup.js"></script>
	</body>
</html>
